<template>
  <div class="popular-category">
    <div class="card-we-design">
      <div class="bgc"></div>
      <div class="ellipse2">
        <div class="icon"></div>
      </div>
      <div class="title">应用开发</div>
      <div class="describe">按照“平台+应用”的研发模式，形成了“智慧政务”、“智慧企业系列解决方案</div>
    </div>
    <div class="card-script-arketing">
      <div class="bgc"></div>
      <div class="ellipse2">
        <div class="icon"></div>
      </div>
      <div class="title">核心平台</div>
      <div class="describe">拥有大数据、云计算、移动互联网、人工智能、云移动设备的核心技术平台</div>
    </div>
    <div class="card-script-progammer">
      <div class="bgc"></div>
      <div class="ellipse2">
        <div class="icon"></div>
      </div>
      <div class="title">智慧系统</div>
      <div class="describe">国内智慧政务、智慧企业、智慧社区及智慧生活领域的信息化综合服务提供商</div>
    </div>
    <div class="card-script-writer">
      <div class="bgc"></div>
      <div class="ellipse2">
        <div class="icon"></div>
      </div>
      <div class="title">IT运维</div>
      <div class="describe">提供集软件开发、系统集成、IT运维、平台建设等于一体的信息化综合解决方案</div>
    </div>
    <div class="advantage-describe">
      创思信息科技发展有限公司成立于2000年，是国内智慧政务、智慧企业、智慧社区及智慧生活领域的信息化综合服务提供商，主要致力于为政企客户、社会团体和个人提供集软件开发、系统集成、IT运维、平台建设等于一体的信息化综合解决方案。
      创思信息注重跟踪最新技术发展趋势，在大数据、云计算、移动互联网、人工智能、云移动设备等领域都已创建了多个具有自主知识产权且处于国内领先地位的核心技术平台。
    </div>
    <div class="advantage-title">创思竞争优势</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less">
.popular-category {
  position: absolute;
  left: 0px;
  top: 976px;
  width: 1440px;
  height: 946px;
  background: url('../images/Popular Category.png');
  .bgc {
    /* Card Web Desain */

    position: absolute;
    left: 0px;
    top: 0px;
    width: 305px;
    height: 193px;
    border-radius: 7px;
    background: linear-gradient(
      122deg,
      #17175c -16%,
      #17175c -16%,
      rgba(0, 0, 0, 0.7) 123%,
      rgba(0, 0, 0, 0.7) 123%
    );
  }
  .ellipse2 {
    /* Ellipse 2 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 12px;
    top: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
  }
  .title {
    /* 应用开发 */

    position: absolute;
    left: 31px;
    top: 84px;
    width: 80px;
    height: 23.44px;
    font-family: RobotoRoman-Medium;
    font-size: 20px;
    font-weight: normal;
    line-height: 23.44px;
    letter-spacing: 0em;
    color: #ffffff;
  }
  .describe {
    /* 按照“平台+应用”的研发模式，形成了“智慧政务”、“智慧企业系列解决方案  */

    position: absolute;
    left: 31px;
    top: 114px;
    width: 211px;
    height: 28px;

    font-size: 14px;
    font-weight: normal;
    line-height: 16.41px;
    letter-spacing: 0em;
    color: #ffffff;
  }
  .card-we-design {
    /* Card We Design */

    position: absolute;
    left: 65px;
    top: 292px;
    width: 305px;
    height: 193px;
    .icon {
      /* carbon:application-web */
      width: 34px;
      height: 34px;
      background: url('../images/carbon_application-web.png') no-repeat;
    }
  }
  .card-script-arketing {
    /* Card Script Marketing */

    position: absolute;
    left: 400px;
    top: 347px;
    width: 305px;
    height: 193px;
    .icon {
      /* carbon:application-web */
      width: 34px;
      height: 34px;
      background: url('../images/nimbus_marketing.png') no-repeat;
    }
  }
  .card-script-progammer {
    /* Card Script Progammer */

    position: absolute;
    left: 65px;
    top: 540px;
    width: 305px;
    height: 193px;
    .icon {
      /* carbon:application-web */
      width: 34px;
      height: 34px;
      background: url('../images/bi_code-slash.png') no-repeat;
    }
  }
  .card-script-writer {
    /* Card Script Writer */

    position: absolute;
    left: 400px;
    top: 595px;
    width: 305px;
    height: 193px;
    .icon {
      /* carbon:application-web */
      width: 34px;
      height: 34px;
      background: url('../images/arcticons_tagwriter.png') no-repeat;
    }
  }
  .advantage-describe {
    position: absolute;
    left: 846px;
    top: 399px;
    width: 575px;
    height: 253px;

    font-size: 16px;
    font-weight: normal;
    line-height: 28px;
    letter-spacing: 0em;
    color: #ffffff;
  }
  .advantage-title {
    /* 创思竞争优势 */

    position: absolute;
    left: 846px;
    top: 297px;
    width: 417px;
    height: 70px;
    font-family: RobotoRoman-Medium;
    font-size: 48px;
    font-weight: normal;
    line-height: 56.25px;
    letter-spacing: 0em;
    color: #ffffff;
  }
}
</style>
